<template>
  <el-drawer
    direction="rtl"
    v-model:visible="isShowDialog"
    @close="handleBtnClick({ type: 'close' })" v-model="isShowDialog" :size="px2vw('842px')">
    <template #header>
      <div class=" font-bold pl-[12px]">采购链接</div>
    </template>

    <div class="pl-[12px]">
      <div class="w-[778px] h-[88px] bg flex items-center pl-[22px]"
           style="background-image: url(https://img.alicdn.com/imgextra/i1/801089336/O1CN01vSfpv22Ipwk6gp5TN_!!801089336.png)">
        <div class="bg rounded-[5px] bg w-[48px] h-[48px]"
             :style="`background-image: url(${ info.cover })`">

        </div>
        <div class="ml-[14px]">
          <div class="title">{{ info.productName }}</div>
          <div class="text-[#999999] mt-[5px]">SKU:{{ info.sku }}</div>
        </div>
      </div>

      <div class="mt-[24px]">
        <QueryTable
          :list="dataList"
          :total="total"
          @execute="handleBtnClick"
          :thead="th"
          v-model="queryParams"
          :show-action="false"
          :show-section="false"
          :show-expand="true"
          pk="id"
          :expandKeys="dataList.map(item=>item.id)"
        >
          <template #expand="{row,index}">

            <QueryTable
              :list="row.productPurchaseDOList"
              :total="totalSub"
              @execute="handleBtnClick"
              :thead="thSub"
              v-model="queryParams"
              :show-action="true"
              :show-section="false"
            >

              <template #link="scope">
                <div>
                  <div style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                       v-if="!scope.row.isEdit"
                  ><a :href="scope.row.url" target="_blank">{{ scope.row.url }}</a>
                  </div>

                  <el-input v-if="scope.row.isEdit" v-model="scope.row.url"/>
                </div>
              </template>

              <template #remark="{row}">
                <div>
                  <div v-if="!row.isEdit">
                    {{ row.remark }}
                  </div>
                  <el-input v-if="row.isEdit" v-model="row.remark"/>
                </div>
              </template>

              <template #btn="scope">
                <div class="flex-center" v-style="`gap:10px`">
                  <Icon icon="ep:edit-pen"
                        v-if="!scope.row.isEdit"
                        @click="scope.row.isEdit=true"
                        color="#3721FF"/>
                  <Icon icon="ep:circle-check-filled"
                        v-if="scope.row.isEdit"
                        @click="scope.row.isEdit=false"
                        color="#4ACA6C"/>
                  <Icon icon="ep:close-bold" class="ml-[5px]" color="#707070"
                        @click="handleBtnClick({type:'delItem',index,idx:scope.index})"/>

                </div>

              </template>
            </QueryTable>

            <el-button type="primary" class="mt-[24px]"
                       @click="handleBtnClick({type:'add',row,index})">添加采购链接
            </el-button>
          </template>
        </QueryTable>

      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleBtnClick({ type: 'close' })">取 消</el-button>
        <el-button type="primary" @click="handleBtnClick({ type: 'confirm' })">确 定</el-button>
      </div>
    </template>


  </el-drawer>
</template>
<script setup lang="ts">
import {px2vw} from "@/utils";
import QueryTable from "@/components/TableData/index.vue"
import Icon from "@/components/Icon/src/Icon.vue";
import {confirmPromote} from "@/utils";
import InfoAction from "@/views/purchase/warehouse/components/InfoAction.vue";
import {PurchaseSuggestApi} from "@/api/purchase/advice";
import {ProductApi} from "@/api/product/addProduct";

const props = defineProps({
  modelValue: {
    type: Boolean,
    required: false,
    default: () => false
  },
  info: {
    type: Object,
    required: false,
    default: () => {
    }
  },

})

const emit = defineEmits(['update:modelValue', 'confirm']);

const InfoSkuRef = ref(null)

const isShowDialog = ref(false);

const queryParams = ref({
  pageNo: 1, pageSize: 10
})


const dataList = ref([])
const total = ref(0)
const th = ref([
  {
    name: '商品名称',
    code: 'productName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '内部编号/商品ID',
    code: 'id',
    type: 'numberRanger',
    search: true
  },
  {
    name: '创建部门',
    code: 'deptName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '创建者',
    code: 'creatorName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '关联订单数',
    code: 'numberOrders',
    type: 'numberRanger',
    search: true
  },
  {
    name: '订单占用数',
    code: 'orderOccupancy',
    type: 'numberRanger',
    search: true
  }
])

const thSub = ref([
  {
    name: '采购链接',
    code: 'link',
    type: 'numberRanger',
    search: true
  },
  {
    name: '备注',
    code: 'remark',
    type: 'numberRanger',
    search: true
  },
])

const totalSub = ref(0);

const handleBtnClick = (e) => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }

}

const fn = {
  add({index,row}) {
    dataList.value[index].productPurchaseDOList.push({
      productId:row.productId,
      url: "",
      remark: "",
      isEdit: true
    })
  },
  async delItem({index, idx}) {
    await confirmPromote({
      content: "是否删除该采购链接？"
    })
    dataList.value[index].productPurchaseDOList.splice(idx, 1);
  },
  close() {

    emit('update:modelValue', false)
  },
  confirm() {
    fn.close();
    emit('confirm', {
      type: 'purchaseLinkConfirm', data: {
        dataList: dataList.value,
        info: props.info
      }
    })
  }
}

const getDetail = async () => {

  //获取关联商品
  let callback = await ProductApi.getRelatedProduct(props.info.productId);

  let list = callback || [];


  console.log(callback,"ccccccccccccccc")


  let res = await PurchaseSuggestApi.getPurchaseLink(list.map(item=>{return item.id}).join(','));

  // let linkList = res || [];
  //
  // list.forEach(item=>{
  //   let liList = linkList.filter(at=>{
  //     return at.productId == item.id
  //   })
  //
  //   item.list = liList
  // })
  //
  // console.log(callback,"ccccccccccccc",list)

  dataList.value = [
    ...res
  ]


}

watch(() => props.modelValue, () => {
  isShowDialog.value = props.modelValue;

  if (props.modelValue) {
    getDetail();
  }
})

</script>
<style lang="scss" scoped>

</style>
